<template>
  <div style="padding: 20px">
    <Alert message="输入框示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
    </Alert>
    <div class="demoTittle">输入框</div>
    <div class="demoTittle2"
      >- 高度为32px，常用宽度为40px,80px,160px,200px,240px,320px，文字14px，边角4px，边框1px
      #F0F0F0，表单内图标16px;</div
    >
    <a-space direction="vertical" :size="30">
      <a-space :size="20">
        <a-input v-model:value="value4" placeholder="默认说明" />
        <a-input v-model:value="value5" placeholder="带图标输入">
          <template #prefix>
            <InfoCircleOutlined style="color: #999999" />
          </template>
        </a-input>
        <a-input v-model:value="value6" placeholder="带操作输入">
          <template #suffix>
            <SearchOutlined style="color: #999999" />
          </template>
        </a-input>
        <a-input-group compact>
          <a-input v-model:value="value7" placeholder="带选择输入" style="width: 60%" />
          <a-select v-model:value="value8">
            <a-select-option value="ID">ID卡</a-select-option>
            <a-select-option value="YG">ID卡</a-select-option>
          </a-select>
        </a-input-group>
        <a-space>
          <a-input v-model:value="value9" style="width: 160px" />
          <div>
            <a-tooltip title="Extra information">
              <a-space :size="4">
                <ExclamationCircleFilled style="color: #3c81f0" />
                <span class="color999999">帮助文案</span>
              </a-space>
            </a-tooltip>
          </div>
        </a-space>
      </a-space>
      <a-space :size="20">
        <a-input v-model:value="value10" placeholder="带图标输入">
          <template #prefix>
            <SearchOutlined style="color: #999999" />
          </template>
          <template #suffix>
            <InfoCircleOutlined style="color: #999999" />
          </template>
        </a-input>
        <a-input v-model:value="value11">
          <template #prefix> ¥ </template>
          <template #suffix> RMB </template>
        </a-input>
        <a-input-group compact>
          <a-input
            v-model:value="value12"
            placeholder="带按钮选择框"
            style="width: calc(100% - 90px)"
          />
          <AButton textColor="#0052D9">选择文件</AButton>
        </a-input-group>
        <a-space>
          <a-input v-model:value="value9" style="width: 160px" />
          <div>
            <a-tooltip title="Extra information">
              <a-space :size="4">
                <ExclamationCircleFilled style="color: #f5820f" />
                <span style="color: #f5820f">提示文字颜色#F5820F</span>
              </a-space>
            </a-tooltip>
          </div>
        </a-space>
      </a-space>
      <a-space :size="20">
        <a-input-search v-model:value="value12" placeholder="带按钮选择框">
          <template #enterButton>
            <a-space :size="4">
              <SearchOutlined />
              搜索
            </a-space>
          </template>
        </a-input-search>
        <a-input v-model:value="value13" addon-before="Http://" placeholder="请输入地址" />
        <a-input-group compact>
          <a-select v-model:value="value14">
            <a-select-option value="Option1">选项一</a-select-option>
            <a-select-option value="Option2">选项二</a-select-option>
            <a-select-option value="Option3">选项三</a-select-option>
          </a-select>
          <a-input v-model:value="value15" style="width: 60%" placeholder="请输入地址">
            <template #suffix>
              <SearchOutlined style="color: #999999" />
            </template>
          </a-input>
        </a-input-group>
      </a-space>
    </a-space>
    <div class="demoTittle">size&状态</div>
    <a-space direction="vertical">
      <a-input
        v-model:value="value"
        placeholder="默认状态"
        :allow-clear="true"
        style="width: 180px"
      />
      <a-input
        v-model:value="value2"
        placeholder="禁用状态"
        :disabled="true"
        style="width: 180px"
      />
      <a-textarea v-model:value="value1" show-count :maxlength="100" style="width: 320px" />
    </a-space>
    <div class="demoTittle">输入框校验</div>
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item ref="name" label="姓名" name="name">
        <a-input v-model:value="formState.name" :allow-clear="true" style="width: 180px" />
      </a-form-item>
      <a-form-item has-feedback ref="name" label="姓名" name="name">
        <a-input v-model:value="formState.name" :allow-clear="true" style="width: 180px" />
      </a-form-item>
      <a-space :size="12">
        <a-button type="primary" @click="onSubmit">确定</a-button>
        <a-button @click="resetForm">取消</a-button>
      </a-space>
    </a-form>
    <div class="demoTittle">输入框尺寸</div>
    <div class="demoTittle2">
      - 1号输入框 高度为32px，用于大部分表单输入框；<br />
      - 2号输入框高度为40px，用于登录，修改密码较大输入框；<br />
      - 3号输入框高度为28px，用于表格内地方狭小输入框；
    </div>
    <a-space direction="vertical">
      <a-input v-model:value="value3" placeholder="1号输入框" style="width: 160px" />
      <a-input v-model:value="value3" size="large" placeholder="2号输入框" style="width: 160px" />
      <a-input v-model:value="value3" size="small" placeholder="3号输入框" style="width: 160px" />
    </a-space>
    <div class="demoTittle">加减翻动控件</div>
    <a-input-number
      id="inputNumber"
      v-model:value="value16"
      :defaultValue="0"
      :min="0"
      :max="10"
      :parser="(value) => (value == '' ? 0 : value)"
      style="width: 180px"
    >
      <template #upIcon>
        <CaretUpOutlined />
      </template>
      <template #downIcon>
        <CaretDownOutlined />
      </template>
    </a-input-number>
  </div>
</template>
<script setup lang="ts">
  import type { Rule } from 'ant-design-vue/es/form';
  import { Alert } from 'ant-design-vue';
  import { reactive, ref, toRaw } from 'vue';
  import {
    SmileOutlined,
    CaretUpOutlined,
    CaretDownOutlined,
    InfoCircleOutlined,
    SearchOutlined,
    ExclamationCircleFilled,
  } from '@ant-design/icons-vue';
  import { AButton } from '@/components/basic/button';

  const formRef = ref();
  const labelCol = { style: 'width:66px' };
  const wrapperCol = { span: 6 };

  const formState = reactive({
    name: '',
  });

  const value = ref<string>('');
  const value1 = ref<string>('');
  const value2 = ref<string>('');
  const value3 = ref<string>('');
  const value4 = ref<string>('');
  const value5 = ref<string>('');
  const value6 = ref<string>('');
  const value7 = ref<string>('');
  const value8 = ref<string>('ID');
  const value9 = ref<string>('');
  const value10 = ref<string>('');
  const value11 = ref<string>('');
  const value12 = ref<string>('');
  const value13 = ref<string>('');
  const value14 = ref<string>('Option2');
  const value15 = ref<string>('');
  const value16 = ref<number>(0);

  const rules: Record<string, Rule[]> = {
    name: [
      { required: true, message: '请输入名字', trigger: 'change' },
      { min: 3, max: 5, message: '长度在3到5', trigger: 'blur' },
    ],
  };

  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        console.log('values', formState, toRaw(formState));
      })
      .catch((error) => {
        console.log('error', error);
      });
  };
  const resetForm = () => {
    formRef.value.resetFields();
  };
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
    margin-bottom: 18px;
    line-height: 20px;
  }

  .ant-input-sm {
    padding: 2px 7px;
  }
  .color999999 {
    color: #999999;
  }
  :deep(.ant-input-group .ant-input-group-addon) {
    background-color: #ffffff;
    color: #999999;
  }
</style>
